<template>
  <div title="交通事件添加表" class="add-event" v-if="eventFormShow">
    <el-form :model="form" ref="formRef">
      <el-form-item label="事件编号" prop="eventId">
        <el-input v-model="form.eventId"></el-input>
      </el-form-item>
      <el-form-item label="驾驶员" prop="eventDriver">
        <el-input v-model="form.eventDriver"></el-input>
      </el-form-item>
      <el-form-item label="事件类型" prop="eventType">
        <el-select v-model="form.eventType" placeholder="请选择事件类型">
          <el-option label="碰撞" value="碰撞" />
          <el-option label="刮擦" value="刮擦" />
          <el-option label="失火" value="失火" />
          <el-option label="其他" value="其他" />
        </el-select>
      </el-form-item>
      <el-form-item label="事件等级" prop="eventLevel">
        <el-select v-model="form.eventLevel" placeholder="请选择事件等级">
          <el-option label="轻微事故" value="4" />
          <el-option label="一般事故" value="3" />
          <el-option label="重大事故" value="2" />
          <el-option label="特大事故" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="发生时间" prop="eventTime">
        <el-date-picker
          v-model="form.eventTime"
          type="datetime"
          placeholder="请选择发生时间"
          format="YYYY/MM/DD HH:mm"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="发生地点" prop="eventLocation">
        <el-input v-model="form.eventLocation"></el-input>
      </el-form-item>
      <el-form-item label="车牌号" prop="plateNumber">
        <el-input v-model="form.plateNumber"></el-input>
      </el-form-item>
      <el-form-item label="处理状态" prop="eventStatus">
        <el-select v-model="form.eventStatus" placeholder="请选择处理状态">
          <el-option label="未处理" value="0" />
          <el-option label="处理中" value="1" />
          <el-option label="已处理" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('formRef')">继续</el-button>
      </el-form-item>
    </el-form>
    <!-- </div> -->
  </div>
  <el-dialog title="已审核事件表" width="1200" v-model="alreadyAuditShow" class="add-container">
    <div class="add-list-counter">
      <el-button @click="handleAddUserEvent">添加事件</el-button>
      <div class="demo-pagination-block">
        <el-table :data="tableAlreadyEventData" style="width: 100%">
          <el-table-column prop="event_type" label="事件类型"></el-table-column>
          <el-table-column prop="event_date" label="发生时间"></el-table-column>
          <el-table-column prop="road_section_id" label="事件地址"></el-table-column>
          <el-table-column prop="event_car_number" label="驾驶员车牌号"></el-table-column>
          <el-table-column prop="event_driver" label="驾驶员"></el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button @click="handleAddUserEvent(row)">添加</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :page-count="Math.ceil(total / pageSize)"
        >
        </el-pagination>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { useEventAlreafyAuditStore } from '../../../../../../stores/evenetMange/eventAlreadyAuditStore'
import { Point } from '../../../../../../utils/es6AddPoint'
import { createDraw } from '../../../../../../utils/createDraw'

const {
  tableAlreadyEventData,
  currentPage,
  pageSize,
  total,
  handleSizeChange,
  handleCurrentChange
} = useEventAlreafyAuditStore()
let map
const eventFormShow = ref(false)
const alreadyAuditShow = ref(true)
const form = reactive({
  eventId: 'SJ2023',
  eventDriver: '',
  eventType: '',
  eventLevel: null,
  eventTime: '',
  eventLocation: '',
  plateNumber: '',
  eventStatus: null
})

// 实现添加添加事件\
let docLayer, position, service, attr, status
let draw = []
const handleAddUserEvent = async (row) => {
  alreadyAuditShow.value = !alreadyAuditShow.value
  // 回显表单数据
  if (row.id) {
    getOneEventHttp(row.id).then((res) => {
      form.eventDriver = res.data.data.event_driver
      form.eventType = res.data.data.event_type
      form.eventTime = res.data.data.event_date
      form.eventLocation = res.data.data.road_section_id
      form.plateNumber = res.data.data.event_car_number
      addPoint()
    })
  } else {
    addPoint()
  }
  // 实现添加点

  async function addPoint() {
    docLayer = map.getLayers().item(1)
    // 创建画布
    var source = new ol.source.Vector({})
    var layer = new ol.layer.Vector({
      source
    })
    map.addLayer(layer)
    // 绘制点
    map.removeInteraction(draw)
    draw = createDraw({
      type: 'Point',
      source
    })

    map.addInteraction(draw)
    draw.on('drawend', (e) => {
      eventFormShow.value = !eventFormShow.value
      // console.log(eventFormShow.value)
      position = e.feature.getGeometry().getCoordinates()
      draw.setActive(false)
      map.removeInteraction(draw)
      service = {
        name: 'guanggu',
        layerId: 2
      }
    })
  }
}

// 提交事件添加
const submitForm = () => {
  attr = [
    { type: 'string', key: '事件编号', value: form.eventId },
    { type: 'string', key: '事件类型', value: form.eventType },
    { type: 'smallint', key: '事件等级', value: form.eventLevel },
    { type: 'string', key: '发生时间', value: form.eventTime },
    { type: 'string', key: '发生地点', value: form.eventLocation },
    { type: 'string', key: '车牌号', value: form.plateNumber },
    { type: 'string', key: '驾驶员', value: form.eventDriver },
    { type: 'smallint', key: '处理状态', value: form.eventStatus },
    { type: 'int', key: 'mpLayer', value: 0 }
  ]
  Point.add({
    position,
    service,
    attr,
    docLayer,
    form
  })
  eventFormShow.value = !eventFormShow.value
  docLayer.refresh()
}
onMounted(async () => {
  map = await useGlobalMap()
})
</script>

<style scoped>
@import '../../styles/add.css';
</style>
